<template>
    <n-drawer v-model:show="show" :width="502">
        <n-drawer-content :title="`${pageTitle}详情`" closable>
            <n-spin v-if="loading" :show="loading">
                <template #description> loading... </template>
            </n-spin>
            <FormTemplate
                v-else
                ref="formTemplateRef"
                :form-list="configList"
                :rules="rules"
                :form-props="formProps"
                :form-item-props="formItemProps"
            >
            </FormTemplate>
        </n-drawer-content>
    </n-drawer>
</template>

<script setup>
import FormTemplate from '../FormTemplate/index.vue';
import { queryDetails } from '@/api/public';
import { deepClone } from '@/utils';
import { ref, watch } from 'vue';

const props = defineProps({
    // 表名
    tableName: {
        type: String,
        default: '',
        required: true
    },
    dataId: {
        type: String,
        default: ''
    },
    pageTitle: {
        type: String,
        default: ''
    },
    formProps: {
        type: Object,
        default: () => ({})
    },
    formItemProps: {
        type: Object,
        default: () => ({})
    },
    formList: {
        type: Array,
        default: () => []
    },
    rules: {
        type: Object,
        default: () => ({})
    }
});
const show = defineModel();
const configList = ref([]);
const loading = ref(false);

const setConfig = res => {
    configList.value.forEach(item => {
        item.value = res[item.code];
    });
};
const getDetails = async () => {
    const res = await queryDetails(props.tableName, { _id: props.dataId });
    setConfig(res);
};
const initConfig = () => {
    configList.value = deepClone(props.formList);
};
watch(
    () => show.value,
    async val => {
        if (val) {
            loading.value;
            initConfig();
            await getDetails();
            loading.value = false;
        }
    }
);
</script>
<style lang="less" scoped></style>
